<script setup lang='ts'>
// import ShowCase from "./components/02_IfShowCase.vue";
// import InputBind from "./components/03_事件绑定指令.vue"
// import ImgBind from "./components/04_属性绑定指令.vue"
// import ImgFor from './components/05_列表渲染指令.vue'
// import LoginForm from './components/06_双向绑定指令.vue'
// import ComputedCase from './components/07_计算属性.vue'
// import ComputedCaseA from './components/08_计算属性完整写法.vue'
// import WatchOneData from './components/09_使用watch监听一个数据.vue'
// import WatchData from './components/10_watch监听多个响应式数据.vue'
// import WatchObjData from './components/11_watch监听对象数据.vue'
// import NBCase from './components/综合案例.vue'
// import LifeCase from './components/12_生命周期钩子函数.vue'
// import ListV2Case from './components/13_vue2生命周期.vue'
// import RefCase from './components/14_ref获取dom对象.vue'
// import HmHeader from "./components/HmHeader.vue"
// import HmBody from "./components/HmContainer.vue"
// import HmFooter from "./components/HmFooter.vue"
// import Parent from "./components/15_组件传值-父组件.vue"
// import GrandPa from './components/16_后代组件传值-爷爷组件.vue'
import SlotCase from "./components/17_具名插槽.vue"
import HmTable from './components/18_vue3中封装table组件.vue'
import TestTable from './components/18_作用域插槽的简单版本.vue'
import { ref } from "vue"
const showCom = ref(true)

// type PersonColumnArr = Array<{ label: string, field: keyof {id: number, username: string, age: number} }>
type PersonColumnArr = Array<{ label: string, field: string }>
type PersonArr = Array<{ id: number, username: string, age: number }>
const columns: PersonColumnArr = [
    { label: '序号', field: "id" },
    { label: '姓名', field: "username" },

    { label: '年纪', field: "age" },
    { label: '操作', field: "" }
]

const data = ref<PersonArr>([
    {
        id: 1,
        username: '张小华',
        age: 18
    },
    {
        id: 2,
        username: '高大明',
        age: 18
    }, {
        id: 3,
        username: '刘德住',
        age: 20
    }

])

const delRow = (row: { id: number, username: string, age: number }) => {
    data.value = data.value.filter(item => item.id !== row.id)
}
</script>

<template>
    <!-- <ShowCase></ShowCase> -->
    <!-- <input-bind></input-bind>
    <ImgBind></ImgBind> -->
    <!-- <ImgFor></ImgFor> -->
    <!-- <LoginForm></LoginForm> -->
    <!-- <ComputedCase></ComputedCase> -->
    <!-- <ComputedCaseA></ComputedCaseA> -->
    <!-- <WatchOneData></WatchOneData> -->
    <!-- <WatchData></WatchData> -->
    <!-- <WatchObjData></WatchObjData> -->
    <!-- <LifeCase v-if="showCom"></LifeCase>
    <ListV2Case></ListV2Case>
    <button @click="showCom = !showCom">创建/销毁</button> -->
    <!-- <RefCase></RefCase> -->
    <!-- <NBCase></NBCase> -->
    <!-- <div class="container">
        <HmHeader></HmHeader>
        <HmBody></HmBody>
        <HmFooter></HmFooter>
    </div> -->
    <!-- <Parent></Parent> -->
    <!-- <GrandPa></GrandPa> -->
    <!-- <SlotCase>
        <template v-slot:header>
            <h1>头部内容</h1>
        </template>
<template #body>
            <h1>主体内容</h1>
        </template>
<template #footer>
            <h1>底部内容</h1>
        </template>
<template #default>
            匿名插槽的传入
        </template>
</SlotCase> -->
    <!-- <SlotCase>
        <template #header>
            <h1>头部内容</h1>
        </template>
        <template #body>
            <h1>主体内容</h1>
        </template>
        <template #footer>
            <h1>底部内容</h1>
        </template>
        <template #default>
            匿名插槽的传入
        </template>
    </SlotCase> -->
    <!-- <HmTable :columns="columns" :data="data">
        <template #row="obj">
            <button>编辑</button>
            <button @click="delRow(obj.row)">删除</button>
        </template>

    </HmTable> -->
    <!-- 子组件的数据 父组件 -传入插槽时使用 使用 -->
    <!-- <TestTable>
        <template #row="{ p }">
            <h2>姓名：{{ p.name }}, 年龄： {{ p.age }}</h2>
        </template> 
    </TestTable> -->
    <div class="container">
        <div class="nav">
            <router-link to="/home">去主页</router-link>
            <router-link to="/login">去登录</router-link>
        </div>
        <router-view></router-view>
    </div>

</template>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.nav a {
    margin-left: 10px;
    text-decoration: none;
}

.router-link-active {
    font-size: 30px;
}
</style>